<template>
  <div class="verify-order-container">
    <div class="buyer">
      <div style="width: 100%;">下单人信息：</div>
      <div class="flex">
        <div class="heard_img"><img :src="buy_user.heard_img"></div>
        <div>
          <div v-if="buy_user.nick_name">昵称：{{ buy_user.nick_name }}</div>
          <div v-if="buy_user.mobile">手机号：{{ buy_user.mobile }}</div>
        </div>
      </div>
    </div>
    <div class="car-middle" v-if="lists.length>0">
      <div class="car-middle-wrap">
        <!-- <van-list
          v-model="loading"
          :finished="finished"
          :error.sync="error"
          :immediate-check="immediateCheck"
          error-text="请求失败，点击重新加载"
          finished-text=""
          @load="onLoad"
        > -->
          <van-checkbox-group v-model="result" ref="checkboxGroup" @change="changeSelect">
            <div class="" v-for="(lists_vo) in lists" :key="lists_vo.order_item_id">
              <van-checkbox
                :name="lists_vo.order_item_id"
                icon-size="18px"
                checked-color="#F42B2B"
                label-disabled
                class="goods-list"
                :disabled="lists_vo.num<1?true:false"
              >
                <div class="car-middle-wrap-item">
                  <!-- <div class="car-checkbox">
                    <van-checkbox v-model="checked" checked-color="#F42B2B"></van-checkbox>
                  </div>-->
                  <div class="car-goods">
                    <div class="car-goods-img">
                      <a href="javascript:;">
                        <img
                          v-if="lists_vo.image_url"
                          :src="lists_vo.image_url"
                          alt=""
                        />
                        <img
                          v-else
                          :src="defaultImg"
                          alt
                        />
                      </a>
                    </div>

                    <div class="car-goods-info">
                      <div class="title">
                        <a href="javascript:;">{{lists_vo.item_title}}</a>
                      </div>
                      <span class="fontZiy" v-if="lists_vo.is_self_support == 1">自营</span>
                      <div class="sku">
                        <!-- sku -->
                        <p class="goods-props" v-if="lists_vo.sku_name">
                          <em>{{lists_vo.sku_name}}</em>
                        </p>
                        <!-- 日期和备注 -->
                        <!-- <p
                          v-if="lists_vo.item_date"
                          style="color: #999"
                          class="item-date"
                        >日期：{{lists_vo.item_date}}</p>
                        <p class="item-demo" v-if="lists_vo.item_memo" style="color: #999">{{lists_vo.item_memo}}</p> -->
                      </div>
                      <div class="price-add">
                        <div class="price-box">
                          <span class="price-now" v-html="scaleGoodsPriceFn(lists_vo.current_price)"></span>
                        </div>

                        <div class="add">
                          <count-plug :value="lists_vo.can_num" :maxLimit="lists_vo.num" :disabled="disabled" @changeNum="changeNum(arguments,lists_vo)"></count-plug>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </van-checkbox>
            </div>
          </van-checkbox-group>
        <!-- </van-list> -->
      </div>
      <div class="car-package">
        <div class="car-package-num">
          <div class="car-checkbox">
            <van-checkbox v-model="checked" icon-size="18px" checked-color="#F42B2B" @click="isSelectAll">
              <span class="check-txt">全选</span>
            </van-checkbox>
          </div>
        </div>
        <div class="car-package-price">
          <div class="price">
            <div class="price-top">
              已选
              <span class="total">{{total}}</span>件
            </div>
          </div>
          <div class="btn">
            <div class="btn-buy red-gra-btn" @click="confirmVerify">确认核销</div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="no-goods" v-else-if="lists.length<=0 && finished">
      <no-goods ></no-goods>
    </div> -->
  </div>
</template>

<script>
import Vue from 'vue'
import { Checkbox, CheckboxGroup } from 'vant'
Vue.use(Checkbox).use(CheckboxGroup)
import { scaleGoodsPrice } from '@/utils/index.js'
import CountPlug from '@/components/CountPlug'
import { ajaxGetOrderVerifyItem, ajaxVerifyItem } from '@/api/order/order.js'
export default Vue.extend({
  name: 'index',
  components: {
    CountPlug
  },
  data() {
    return {
      defaultImg:'https://img.wifenxiao.com/h5-wfx/images/default_goods_img.jpg',
      selectNum: 0,
      total: 0,
      checked: true, // 全选
      result: [],
      disabled: false,
      immediateCheck: false,
      lists: [],
      // loading: false,
      // finished: false,
      // error: false,
      listsParams: {
        order_verify_no: ''
        // p: 1
      },
      jxgzl_dz: 0,
      buy_user: {}
    }
  },
  watch: {
    result(val) {
      this.selectNum = val.length || 0
      this.totalChange()
    }
  },
  methods: {
    JumpName(name, data) {
      this.$JumpName(this, name, data)
    },
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price, 'large')
    },
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)

      ajaxGetOrderVerifyItem(this.listsParams).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.lists = res.data.list
          this.buy_user = res.data.buy_user
          this.jxgzl_dz = res.data.jxgzl_dz
          this.lists.forEach(element => {
            this.result.push(element.order_item_id)
          })
        } else {
          // this.$Error(res.msg)
          this.JumpName('verifyOrderByWeChatResult', { order_verify_no: this.listsParams.order_verify_no, resultStatus: 0, msg: res.msg, jxgzl_dz: this.jxgzl_dz })
        }
      })
    },
    // 暂无分页
    // onLoad() {

    // },
    // 修改数量
    changeNum(arr, lists_vo) {
      const newNum = arr[0]
      this.$set(lists_vo, 'can_num', newNum)
      this.totalChange()
    },
    // 计算选择的商品件数
    totalChange() {
      let totalNum = 0
      this.lists.forEach(element => {
        const id = element.order_item_id
        this.result.findIndex((value) => {
          if (value == id) {
            totalNum += element.can_num * 1
          }
        })
      })
      this.total = totalNum
      // numArr.forEach((val, index, arr) => {
      //   num += val
      // })
      // return num
    },
    // CheckboxGroup的值改变
    changeSelect() {
      // 如果选择的个数不等于商品的个数，全选按钮false
      if (this.result.length != this.lists.length) {
        this.checked = false
      } else {
        this.checked = true
      }
    },
    // 点击全选和取消全选
    isSelectAll() {
      this.$refs.checkboxGroup.toggleAll(this.checked)
    },
    // 确认核销
    confirmVerify() {
      const verificationList = []
      if (this.result.length > 0) {
        this.lists.forEach((item, index) => {
          this.result.forEach((resultItem) => {
            if (resultItem == item.order_item_id) {
              verificationList.push({ 'order_item_id': item.order_item_id, 'verify_num': item.can_num })
            }
          })
        })
        const data = {
          'order_verify_no': this.listsParams.order_verify_no,
          'item_list': verificationList
        }
        this.$loadingWrap.show()
        ajaxVerifyItem(data).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.JumpName('verifyOrderByWeChatResult', { order_verify_no: this.listsParams.order_verify_no, resultStatus: 1, msg: '核销成功', jxgzl_dz: this.jxgzl_dz })
          } else {
            // this.$Error(res.msg)
            this.JumpName('verifyOrderByWeChatResult', { order_verify_no: this.listsParams.order_verify_no, resultStatus: 0, msg: res.msg, jxgzl_dz: this.jxgzl_dz })
          }
        })
      } else {
        this.$Error('请选择需要核销的商品')
      }
    }
  },
  created() {
    this.listsParams.order_verify_no = this.$route.query.verify_order_code
    this.init()
  }
})
</script>
<style lang="scss">
@import 'src/styles/variables';
@import 'src/styles/mixin';
.verify-order-container{
  .goods-list{
    margin-bottom:20px;
    padding:0 30px;
    border-radius:20px;
    background:#fff;
  }
  .van-checkbox{
    align-items:initial;
  }
  .van-checkbox__icon{
    margin-top:100px;
  }
  .van-checkbox__label{
    flex:1;
  }
  //全选
  .car-checkbox{
    .van-checkbox{
      align-items:center;
    }
    .van-checkbox__icon{
      margin-top:0;
    }
  }
  .no-goods{
    padding-top:84px;
  }
  /* .car-top {
    position:fixed;
    top:0;
    // left:0;
    margin: 0 auto;
    max-width: 750px;
    width:100%;
    z-index:10;
    padding: 33px 25px;
    color: #333;
    font-size: 32px;
    line-height: 32px;
    background: #fff;
    border-radius: 0 0 20px 20px;
    .cart-num{
      margin:0 2px;
      color:#F30C23;
    }
    .icon {
      position: absolute;
      right: 25px;
      top: 50%;
      transform: translateY(-50%);
      color: #666666;
      font-size: 28px;
      line-height: 32px;
      .icon_delete{
        font-size: 35px;
        font-weight: bold;
        vertical-align: middle;
        margin-right: 5px;
      }
    }
  } */
  .car-middle {
    // padding:98px 0;
    &-wrap {
      padding:20px;
      &-item {
        position: relative;
        display: flex;
        flex-direction: row;
        padding: 36px 0;
        // border-bottom: 2px solid #eee;
        .car-checkbox {
          margin-right: 20px;
          margin-top: 60px;
        }
        .car-goods {
          flex: 1;
          display: flex;
          flex-direction: row;
          &-img {
            width: 180px;
            height: 180px;
            overflow: hidden;
            border-radius: 10px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          &-info {
            margin-left: 20px;
            flex: 1;
            position: relative;
            .title {
              @include lineClamp();
              font-size: 26px;
              color: #333;
              line-height: 36px;
              margin-bottom: 2px;
            }
            .sku {
              // height:40px;
              // padding: 0 4px;
              color: #666;
              margin-bottom: 2px;
            }
            .type {
              display: inline-flex;
              color: #fff;
              background: $warning;
              line-height: 24px;
              border-radius: 15px;
              padding: 4px 8px;
              margin-bottom: 10px;
            }
            .price-add {
              width: 100%;
              position: absolute;
              bottom:0;
              display:flex;
              justify-content:space-between;
              align-items:center;
              .price-now{
                font-size: 28px;
                line-height: 1;
                color:#F42B2B;
              }
            }
          }
        }
      }
    }
  }
  .car-package {
    width: 100%;
    min-height:100px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 750px;
    background: #fff;
    z-index: 20;
    padding: 11px 0;
    border-top: 1px solid #E5E5E5;
    display: flex;
    flex-direction: row;
    align-items: center;
    .check-txt {
      font-size: 28px;
      margin-left: -5px;
    }
    &-num {
      padding-left: 20px;
      // margin-top: 6px;
      span {
        line-height: 60px;
      }
      .count {
        @include alignTop;
      }
    }
    &-price {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: center;
      .price {
        display:flex;
        flex-direction: column;
        flex: 1;
        text-align: left;
        padding-left: 37px;
        &-top {
          text-align:right;
          font-size: 28px;
          // font-weight: bold;
          // .total{
          //   color: #F42B2B;
          //   font-weight: 400;
          // }
        }
        &-bottom {
          font-size: 24px;
          margin-top: 10px;
        }
      }
      .btn {
        // margin-top: 12px;
        margin-right: 20px;
        margin-left: 20px;
        &-buy {
          color: #fff;
          text-align: center;
          font-size: 32px;
          width:208px;
          line-height:76px;
          border-radius:38px;
        }
      }
    }
  }
}
.buyer {
  background-color: #fff;
  padding: 20px 30px;
  margin: 20px 20px 0px 20px;
  border-radius: 10px;
  font-size: 24px;
  .flex {
    margin-top: 20px;
    display: flex;
    align-items: center;
    // justify-content: space-around;
    .heard_img {
      margin-right: 20px;
      img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }
    }
  }
}
</style>